<template>
  <div style="
    width: 200px;
    background-color: white;
    padding-block: 1vh;
    padding-inline: 2vh;
    border-radius: 20px">
    <font-awesome-icon :icon="icon" :style="style"></font-awesome-icon>
    <div style="font-weight: 300;margin-top: 10px">{{ title }}</div>
    <div style="font-size: large; font-weight: 600;margin-top: 10px">{{ count }}</div>
  </div>
</template>

<script setup>
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import { defineProps } from 'vue';
import { ref } from 'vue';
const props = defineProps({
  icon: Array, // 接受图标数组
  title: String, // 接受标题
  count: Number, // 接受计数
  color:String
});
const style=ref({
  height:'4vh',
  color:props.color
})
</script>

<style scoped lang="scss">

</style>
